import ElTreeGrid from 'element-tree-grid'
// Vue.component(ElTreeGrid.name, ElTreeGrid)

console.log(ElTreeGrid.name)

export default {
  components: {
    // 'el-table-tree-column': ElTreeGrid
    [ElTreeGrid.name]: ElTreeGrid
  },
  data () {
    return {
      // 只是展示不需要数据了
      categoriesList: [],
      pagenum: 1,
      total: 0,
      loading: false,
      isDialogAddCatVisiable: false,
      cateForm: {
        cat_name: '',
        cat_pid_arr: []
      },
      options: []
      // options: [
      //   {
      //     value: 'ziyuan',
      //     label: '资源',
      //     children: [
      //       {
      //         value: 'axure',
      //         label: 'Axure Components'
      //       },
      //       {
      //         value: 'sketch',
      //         label: 'Sketch Templates'
      //       },
      //       {
      //         value: 'jiaohu',
      //         label: '组件交互文档'
      //       }
      //     ]
      //   }
      // ]
    }
  },
  created () {
    this.mlLoadCategoriesList()
    this.mlLoadCategoriesList2()
  },
  methods: {
    async mlLoadCategoriesList (pagenum = 1) {
      const res = await this.$axios.get('/categories', {
        params: {
          type: 3,
          pagenum,
          pagesize: 4
        }
      })
      console.log(res)
      this.categoriesList = res.data.data.result
      this.total = res.data.data.total

      this.loading = false
    },
    pageChange (curPage) {
      console.log(curPage)
      // 1. 改变页数
      // this.pagenum = curPage
      // 2. 获取请求
      this.mlLoadCategoriesList(curPage)
    },
    /**
     * 点击添加分类按钮  弹窗
     */
    showAddCatDialog () {
      this.isDialogAddCatVisiable = true
    },
    /**
     * 获取2级的分类资源
     */
    async mlLoadCategoriesList2 () {
      const res = await this.$axios.get('/categories', {
        params: {
          type: 2
        }
      })
      console.log(res)
      this.options = res.data.data
    },
    /**
     * 添加分类
     */
    async addCate () {
      // cat_pid	分类父 ID	不能为空
      // cat_pid 是自己的pid 同时也是父节点的id
      // cat_name	分类名称	不能为空
      // cat_level	分类层级	不能为空
      /* eslint-disable */
      const { cat_pid_arr, cat_name } = this.cateForm

      console.log(cat_name)

      // console.log(cat_pid_arr[cat_pid_arr.length - 1])

      const res = await this.$axios.post('/categories', {
        cat_pid: cat_pid_arr[cat_pid_arr.length - 1],
        cat_name,
        cat_level: cat_pid_arr.length
      })

      console.log(res)
      if (res.data.meta.status === 201) {
        //1. 关闭对话框
        this.isDialogAddCatVisiable = false

        //2. 加载
        this.mlLoadCategoriesList()
        //3. 弹窗
        this.$message({
          type: 'success',
          message: res.data.meta.msg
        })
      }
    }
  }
}
